import React, { PureComponent } from 'react';
import { List, Grid, Flex } from 'antd-mobile';
import Img from '../../components/Img/Img';
import { routerRedux } from 'dva/router';
import { goods_list } from './goodsList.less';

class GoodsList extends PureComponent {
  onClick = (item) => {
    //console.log(item);
      this.props.dispatch(routerRedux.push(`/goodsearch/gcIdSearch?keyword=${item.relId}&showKeyword=${encodeURIComponent(item.name)}`));
  }

  render() {
    const { data } = this.props;
    // console.log(data)
    const { advPosition, goodClassCustomEntity=[] } = data;
    //console.log(goodClassCustomEntity);


    return (
        <div className={ goods_list }>
            {
                advPosition && advPosition.advUrl && <div><Img src={ advPosition.advUrl } style={{ width: '100%',marginTop:".2rem", height: '2.5rem' }} /></div>
            }
            {
                goodClassCustomEntity && goodClassCustomEntity.map((v,i,a) => {
                // const gridData = customList.classCustomList.map((item) => {
                //   return {
                //     icon: `${IMAGE_DOMAIN}${item.gcPic}`,
                //     text: item.gcName,
                //     ...item
                //   }
                // });
                return (
                    <List key={i}
                          renderHeader={() => {
                            return (
                                <Flex className="goods_list_head" justify="center" align="center">
                                  <div className="gl_head_line"></div>
                                  <div style={{ margin:'0rem 0.2rem', fontSize: '.32rem' }}>
                                      {
                                          v.name
                                      }
                                  </div>
                                  <div className="gl_head_line"></div>
                                </Flex>
                                )
                          }}
                          className="goods-list">
                            <Grid
                              data={v.classCustomList}
                              onClick={this.onClick}
                              columnNum={3}
                              hasLine={false}
                           //   className="gLimg"
                              renderItem={dataItem => {
                                // console.log(dataItem);
                                return (
                                  <Flex key={dataItem.id} style={{ backgroundColor: '#fff', height: '100%' }} direction="column" align="center" justify="center">
                                    <div  style={{ width: '1rem', height: '1rem', borderRadius: '50%', overflow: 'hidden' }}>
                                      <Img src={ dataItem.pic } style={{ width: '1rem', height: '100%', maxHeight:"1rem" }} alt="" />
                                    </div>

                                    <div style={{ fontSize: '0.26rem',marginTop:".2rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:" nowrap" }}>
                                      { dataItem.name }
                                    </div>
                                  </Flex>
                                );
                              }}
                            />
                   </List>
                );
              })
            }
      </div>
    );
  }
}

export default GoodsList;
